import React, {Component} from "react";
import echarts from 'echarts';
import PropTypes from "prop-types";

class LineChart extends React.Component {

    componentDidMount() {
        const myChart = echarts.init(document.getElementById(this.props.chartId));
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            grid: {
                right: 50
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.props.lineXData,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        fontSize: 16
                    },
                    axisLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        fontSize: 16
                    },
                    axisLine: {
                        show: false
                    }
                },
            ],
            color: ['#7696f8', '#72cbdb'],
            series: [
                {
                    type: 'line',
                    name: this.props.chartTitle,
                    smooth: true,
                    data: this.props.lineYData
                },
            ]
        });
    }
    render() {
        const {chartId, chartType} = this.props;
        return <div id={chartId} style={{width: '100%', height: '100%'}}/>
    }
}

LineChart.propTypes = {
    lineXData: PropTypes.array,
    lineYData: PropTypes.array,
};
LineChart.defaultProps = {
    lineXData: [],
    lineYData: []
};
export default LineChart;
